<template>
    <div id="substationSetting">
        <p class="page-title">分站设置</p>
        <div class="container padder">
            <div class="form">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="120px"
                         class="demo-ruleForm el-form">
                    <el-form-item label="分站网址：">
                        <el-link type="primary" @click="targetLink">{{ruleForm.fenzhan_yuming}}</el-link>
                    </el-form-item>
                    <el-form-item label="分站名称：" prop="fenzhan_mingzi">
                        <el-input type="text" :disabled="noSubstation" v-model="ruleForm.fenzhan_mingzi"
                                  autocomplete="off">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="分站Logo：" prop="fenzhan_logo">
                        <el-upload
                                :disabled="noSubstation"
                                drag
                                class="avatar-uploader"
                                action="/api/fenzhan/up_img"
                                :http-request="($event) =>{up($event,'fenzhan_logo')}"
                                :show-file-list="false"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="ruleForm.fenzhan_logo" :src="ruleForm.fenzhan_logo" class="avatar">
                            <i v-if="!ruleForm.fenzhan_logo && !fenzhan_logo_loading"
                               class="el-icon-plus avatar-uploader-icon"></i>
                            <i v-if="fenzhan_logo_loading" class="el-icon-loading avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="分站大图：" prop="fenzhan_datu">
                        <el-upload
                                :disabled="noSubstation"
                                drag
                                class="avatar-uploader"
                                action="/api/fenzhan/up_img"
                                :show-file-list="false"
                                :http-request="($event) =>{up($event,'fenzhan_datu')}"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="ruleForm.fenzhan_datu" :src="ruleForm.fenzhan_datu" class="avatar">
                            <i v-if="!ruleForm.fenzhan_datu && !fenzhan_datu_loading"
                               class="el-icon-plus avatar-uploader-icon"></i>
                            <i v-if="fenzhan_datu_loading" class="el-icon-loading avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="分站icon：" prop="fenzhan_ico">
                        <el-upload
                                :disabled="noSubstation"
                                drag
                                class="avatar-uploader"
                                action="/api/fenzhan/up_img"
                                :show-file-list="false"
                                :http-request="($event) =>{up($event,'fenzhan_ico')}"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="ruleForm.fenzhan_ico" :src="ruleForm.fenzhan_ico" class="avatar">
                            <i v-if="!ruleForm.fenzhan_ico && !fenzhan_ico_loading"
                               class="el-icon-plus avatar-uploader-icon"></i>
                            <i v-if="fenzhan_ico_loading" class="el-icon-loading avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <div class="bottom">
                    <span>VIP站邀请/注册的所有用户,VIP站长都额外享有 <span
                            class="text-danger text-2x">{{ruleForm.fenzhan_dengji}}%</span> 的消费提成!</span>
                    <el-button type="primary" :disabled="noSubstation" @click="sure" :loading="loading">确认修改</el-button>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    import mixins from '../../mixin'

    export default {
        name: 'setting',
        components: {},
        mixins: [mixins],
        data() {
            return {
                fenzhan_logo_loading: false,
                fenzhan_datu_loading: false,
                fenzhan_ico_loading: false,
                ruleForm: {
                    fenzhan_mingzi: '',
                    fenzhan_logo: '',
                    fenzhan_datu: '',
                    fenzhan_ico: ''
                },
                loading: false,
                rules: {
                    fenzhan_mingzi: [
                        {required: true, trigger: 'blur', message: '请输入分站域名'},
                        {min: 1, max: 20, trigger: 'blur', message: '域名长度1-20'},
                    ],
                    fenzhan_logo: [
                        {required: true, trigger: 'blur'}
                    ], fenzhan_datu: [
                        {required: true, trigger: 'blur'}
                    ], fenzhan_ico: [
                        {required: true, trigger: 'blur'}
                    ],
                },
                noSubstation: false
            };
        },
        computed: {},
        methods: {
            //图片上传
            up(config, name) {
                this[`${name}_loading`] = true;
                let fd = new FormData();
                fd.append('image', config.file);
                this.$axios.post(config.action, fd)
                    .then(res => {
                        this[`${name}_loading`] = false;
                        if (res.code === '200') {
                            this.ruleForm[name] = res.msg
                        }
                    })
            },
            //提交分站修改
            sure() {
                this.$refs['ruleForm'].validate(valid => {
                    if (valid) {
                        this.loading = true;
                        this.$axios.post(`/api/fenzhan/up_fenzhan`, this.ruleForm)
                            .then(res => {
                                this.loading = false;
                                if (res.code === '200') {
                                    this.$message.success('修改分站配置成功');
                                }
                            })
                    }
                })
            },
            //打开分站
            targetLink() {
                const a = document.createElement('a');
                a.setAttribute('href', this.ruleForm.fenzhan_yuming + '/dist');
                a.setAttribute('target', '_blank');
                a.click()
            }

        },
        created() {
            //判断是否有分站
            this.$axios.post(`/api/fenzhan/fenzhan_jiance`)
                .then(res => {
                    if (res.code !== '200') {
                        this.noSubstation = true;
                        //跳转到创建分站
                        this.$router.push('create')
                    } else {
                        //获取分站信息
                        this.$axios.post(`/api/fenzhan/Get_Substation_information`)
                            .then(res => {
                                if (res.code === '200') {
                                    this.ruleForm = res.data;
                                }
                            })
                    }
                })
        },
    }
</script>

<style>
    .el-upload-dragger {

        width: 229px;
        height: 180px;

    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        object-fit: contain;
        width: 100%;
        height: 100%;
        border-radius: 5px;
    }
</style>

<style lang="less" scoped>
    #substationSetting {
        .form {
            width: 800px;

            .el-input {
                width: 360px;
            }

            .el-form {
                width: 100%;
                padding-bottom: 20px;
                border-bottom: 1px solid #dee5e7;
                margin-bottom: 20px;
            }

            .bottom {
                display: flex;
                justify-content: space-between;
            }
        }
    }
</style>
